<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <timer-clock></timer-clock>
</body>

<script type="module">
    const myCanvas = document.body.querySelector("#mycanvas");
    const context = myCanvas.getContext("2d");
    context.translate(300, 300);
    // 定义组件类
    class TimerClock extends HTMLElement {
        constructor() {
            super();
            this.#downloadClock({ clockColor: 'green' });
        }
        #downloadClock({ clockColor }) {
            function clock() {
                context.clearRect(-200, -200, 400, 400);

                //表盘的绘制
                context.beginPath();
                context.arc(0, 0, 200, 0, 2 * Math.PI);
                context.strokeStyle = clockColor;
                context.lineWidth = 8;
                context.stroke();

                //刻度的绘制,关注当前坐标系的状态，在特定状态下进行绘制
                for (var i = 0; i < 60; i++) {
                    context.beginPath();
                    if (i % 5 == 0) {
                        context.moveTo(170, 0);
                        context.lineTo(190, 0);
                        context.strokeStyle = "red";
                        context.lineWidth = 6;
                    } else {
                        context.moveTo(176, 0);
                        context.lineTo(190, 0);
                        context.strokeStyle = "black";
                        context.lineWidth = 4;
                    }
                    context.stroke();
                    context.rotate(Math.PI / 30);
                }

                //绘制表盘的数字
                for (var i = 0; i < 12; i++) {
                    var numDeg = (i + 1) * Math.PI / 6 - Math.PI / 2;
                    context.textAlign = "center";
                    context.textBaseline = "middle";
                    var numX = 140 * Math.cos(numDeg);
                    var numY = 140 * Math.sin(numDeg);
                    context.fillText(i + 1, numX, numY);
                }

                //进行时针分针秒针的绘制
                var date1 = new Date();
                var hour = date1.getHours();
                var minute = date1.getMinutes();
                var second = date1.getSeconds();
                hour = hour > 12 ? (hour - 12) : hour;//判断》12点时解决方法
                //旋转角度
                var hourDeg = (hour + minute / 60) * Math.PI / 6;
                var minuteDeg = (minute + second / 60) * Math.PI / 30;
                var secondDeg = second * Math.PI / 30;
                //在当前坐标系中位置
                hourDeg = hourDeg - Math.PI / 2;
                minuteDeg = minuteDeg - Math.PI / 2;
                secondDeg = secondDeg - Math.PI / 2;
                //时针
                var hourStartX = -20 * Math.cos(hourDeg);
                var hourStartY = -20 * Math.sin(hourDeg);

                var hourEndX = 130 * Math.cos(hourDeg);
                var hourEndY = 130 * Math.sin(hourDeg);

                context.beginPath();
                context.moveTo(hourStartX, hourStartY);
                context.lineTo(hourEndX, hourEndY);
                context.strokeStyle = "purple";
                context.lineWidth = 6;
                context.stroke();

                //分针的绘制
                var minuteStartX = -20 * Math.cos(minuteDeg);
                var minuteStartY = -20 * Math.sin(minuteDeg);

                var minuteEndX = 134 * Math.cos(minuteDeg);
                var minuteEndY = 134 * Math.sin(minuteDeg);

                context.beginPath();
                context.moveTo(minuteStartX, minuteStartY);
                context.lineTo(minuteEndX, minuteEndY);
                context.strokeStyle = "pink";
                context.lineWidth = 6;
                context.stroke();

                //秒针的绘制
                var secondStartX = -20 * Math.cos(secondDeg);
                var secondStartY = -20 * Math.sin(secondDeg);

                var secondEndX = 138 * Math.cos(secondDeg);
                var secondEndY = 138 * Math.sin(secondDeg);

                context.beginPath();
                context.moveTo(secondStartX, secondStartY);
                context.lineTo(secondEndX, secondEndY);
                context.strokeStyle = "red";
                context.lineWidth = 4;
                context.stroke();
                //画圆
                context.beginPath();
                context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 6, 0, 2 * Math.PI);
                context.fillStyle = "red";
                context.fill();
                context.beginPath();
                context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 3, 0, 2 * Math.PI);
                context.fillStyle = "black";
                context.fill();
            }
            clock();
            setInterval(clock, 1000);
        }
    }
    // 把类注册成自定义标签<timer-clock>
    customElements.define('timer-clock', TimerClock);
</script>

</html>